<template>
    <view class="main">
        <view class="title">
			<uni-icons @click="goBack" type="back" size="30"></uni-icons>
			<text class="title-text">发帖</text>
			<view class="title-right">
				<text class="title-right_text">发帖</text>
			</view>
		</view>
		<view class="body">
			<view class="body-text">fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</view>
			<view class="publish-images" >
				<template v-for="(item, index) in fileList" >
					<view class="publish-images_item" :data-index="index" @click.stop="actPreviewImage">
						<view @click.stop="deleteItem(index)">
							<u-icon width="42" height="42" name="close-circle-fill" color="rgba(0,0,0,0.5)" size="42"></u-icon>
						</view>
						<u-image width="156rpx" height="156rpx" :src="item.url" mode="aspectFill" border-radius="10">			
						</u-image>
					</view>
					<!-- 视频 需要与图片混到一起-->
					<view class="uni-uploader__file" v-if="src != ''">
						<view class="uploader_video" @click.stop="actVideoPlay" >
							<view @click.stop="delectVideo()" class="close-icon">
								<u-icon width="46" height="46" name="close-circle-fill" color="#fa3534" size="46"></u-icon>
							</view>
							<image
								class="uploader_video_play--icon"
								src="/static/images/home/play.png"
								mode="scaleToFill"
							/>
							<u-image width="118rpx" height="118rpx"  class="article-video_img" mode="widthFix" :src="VodImg+'?imageMogr2/crop/118x118/gravity/center'" v-if="!isPlay"></u-image>
						</view>
						<video id="video" :src="src" class="video" :autoplay="autoplay" @fullscreenchange="fullscreenchange" v-if="isPlay"></video>
					</view>
					
				</template>	
			</view>		
			<view class="u-m-t-20">		
			  <view v-for="(item,index) in files.values()" :key="index" class="u-flex">
				  <view class="icon icon-doc" style="font-size: 40rpx; color:#476BEE"></view>
			  	<view class="color-blue u-font-30" style="color:#476BEE ;">{{ item.name}}</view>
			  	<u-line-progress active-color="#2979ff" :percent="item.progress" class="u-m-l-20" style="width:300rpx " v-if="item.progress < 100"></u-line-progress>
			  	<u-icon name="close-circle-fill" @click.native="clear(item.name)" class="u-m-l-20" size="36" color="rgba(0,0,0,0.5)"></u-icon>
			  </view>
			</view>
				
		</view>
		<view class="publish-handle">
			<view class="publish-handle_content u-flex u-row-between">
				<view class="publish-handle_left u-flex">
					<view class="icon icon-biaoqing u-m-r-20" @click.stop="actEmojiShow()" style="font-size:64rpx"></view>
					<text class="icon icon-weibiaoti1" style="color: #464747; font-size: 64rpx" @click="isShowImagePicker = true"></text>
					<u-popup v-model="isShowImagePicker" mode="bottom">
						<view class="popup-item" @click="chooseImage('camera')">{{ $t('chat.shot') }}</view>
						<view class="popup-item" @click="chooseImage('album')">{{ $t('chat.choose_from_album')}}</view>
						<view class="divider"></view>
						<view class="popup-item" @click="isShowImagePicker = false">{{ $t('chat.chat_cancel') }}</view>
					</u-popup>
					
					<view class="u-m-l-30" @click.stop="isShowVideoPicker = true" v-show="JSON.parse(JSON.stringify(fileList)).length == 0">
						<text class="icon icon-video" style="font-size:54rpx;color: #7a7d7f"></text>
					</view>
					<u-popup v-model="isShowVideoPicker" mode="bottom">
						<view class="popup-item" @click="chooseVideo('camera')">{{ $t('chat.shot') }}</view>
						<view class="popup-item" @click="chooseVideo('album')">{{ $t('chat.choose_from_album')}}</view>
						<view class="divider"></view>
						<view class="popup-item" @click="isShowVideoPicker = false">{{ $t('chat.chat_cancel') }}</view>
					</u-popup>
					<view class="u-m-l-40  icon icon-shipin" style="font-size: 64rpx;"></view>
					<view class="u-m-l-40 icon-file">
				
					
						<lsj-upload
						ref="lsjUpload0"
						childId="upload1"
						:width="width"
						:height="height"
						:option="option"
						:size="size"
						:formats="formats"
						:debug="debug"
						:instantly="instantly"
						@change="onChange"
						@progress="onprogress"
						@uploadEnd="onuploadEnd"
						>
						<view class="icon icon-wenjianjia"></view>
						</lsj-upload>
					</view>
					<view class="u-m-l-30" style="margin-top:-9rpx" @click.stop="$goPage('/note/friends', {}, true)">
						<text class="">@</text>
					</view>
				</view>
				<view class="publish-handle_right">{{curlength}}/{{maxlength}}</view>
			</view>
			<view class="comment-box">
				<view v-if="emojiShow" class="TUI-Emoji-area">
					<TUI-Emoji @enterEmoji="appendMessage"></TUI-Emoji>
				</view>
			</view> 
		</view>
    </view>
</template>
<script>
import { defineComponent ,onMounted,reactive , toRefs} from 'vue'

export default defineComponent({
    setup() {
        const data = reactive({
			showUploadList:false,
			fileList:[
				{url:'/static/images/home.png'},
				{url:'/static/images/home.png'},
				{url:'/static/images/home.png'},
				{url:'/static/images/home.png'},
				{url:'/static/images/home.png'},
				{url:'/static/images/home.png'},
				{url:'/static/images/home.png'},
				{url:'/static/images/home.png'},
				{url:'/static/images/home.png'},
				{url:'/static/images/home.png'}
			],
			width: '60rpx',
			height: '60rpx',
			src:false,
			actVideoPlay:false,
			files:new Map(
			[	
				[1,{name:'ffffffffffffffffffffffffffffffffffffffff',progress:''}]	,
				[2,{name:'ffffffffffffffffffffffffffffffffffffffff',progress:''}]	,
				[3,{name:'ffffffffffffffffffffffffffffffffffffffff',progress:''}]	,
				[4,{name:'ffffffffffffffffffffffffffffffffffffffff',progress:''}]	,
				[5,{name:'ffffffffffffffffffffffffffffffffffffffff',progress:''}]	,
				[6,{name:'ffffffffffffffffffffffffffffffffffffffff',progress:''}]	,
				[7,{name:'ffffffffffffffffffffffffffffffffffffffff',progress:''}]	,
			]
			)
        });
		onMounted(()=>{

			console.log("fffffffffffffffffffffffffffffffffffffffffffffffffffffffff"+data.fileList[0].url)
			// console.log("fffffffffffffffffffffffffffffffffffffffffffffffffffffffff"+data.files)
			// for(let [key, value] of data.files) {    console.log(key + " = " + value)}
		});
		const delectVideo =()=>{
			
		};
		const deleteItem = (index) => {
			// for(let i = 0 ;i <data.fileList.length ;i++){
			// 	console.log(data.fileList[i])
			// }
				data.fileList.splice(index,1)
		};
        return {
            ...toRefs(data),
			deleteItem,
			// files,
			delectVideo
        }
    },
})
</script>

<style lang="scss" scoped>
	.main{
		padding:28rpx 32rpx;
		background-color: #FEFEFE;
		height: 1624rpx;
		width: 100%;
		border-top: 1rpx solid #fff;
	}
	.title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		// text-align: center;
		// vertical-align: middle;
		width: 100%;
		height: 88rpx;
		margin-top: 68rpx;
		// .title-close {
		// 	width: 48rpx;
		// 	height: 48rpx;
		// 	border-radius: 0rpx 0rpx 0rpx 0rpx;
		// 	// margin-top: 110rpx;
		// 	margin-left: 48rpx;
		// 	.icon {
		// 		width: 32rpx;
		// 		height: 32rpx;
		// 		font-size: 32rpx;
		// 		color: #000000;
		// 	}
		// }
		.title-text{
			font-size: 42rpx;
			font-family: PingFang HK-Medium, PingFang HK;
			color: #0F172A;
			// margin:0 auto;
			// margin-top: 110rpx;
		}
		.title-right{
			// min-width: 104rpx;
			padding: 0 24rpx ;
			height: 56rpx;
			background: #476BEE;
			border-radius: 28rpx;
			opacity: 1;
			line-height: 56rpx;
			text-align: center;
			&_text{
				// padding: ;
				height: 39rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FEFEFE;
				line-height: 33rpx;
			}
		}
	}
	.publish {
		padding-bottom: 100rpx;
		min-height: 100vh;
		background-color: #fff;
		&-input{
			padding: 30rpx;
			width: 100%;
		}
	}
	// .publish-images{
	// 	height: 500rpx;
	// 	width: 100%;
	// 	background-color: darkred;
	// }
	.publish-images {
		// padding: 0 16rpx;
		margin-bottom: 30rpx;
		clear:both;
		width: 100%;
		overflow: hidden;
		&_item {
			position: relative;
			// margin: 10rpx;
			padding-right: 16rpx;
			float: left;
			&:nth-child(4n) {
				padding-right: 0;
			}
			.u-icon {
				z-index: 999;
				position: absolute;
				top: 6rpx;
				right: 6rpx;
				background-color: #FFFFFF;
				border-radius: 42px;
			}
		}
	}
	
	.publish-friends {
		padding: 0 30rpx;
	
		&_item {
			font-size: 28rpx;
			color: #0073DB;
		}
	}
	.uploader_video{
		position: relative;
		width: 118rpx;
		height: 118rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.close-icon{
			z-index: 99999;
			position: absolute;
			top: 4rpx;
			right: 4rpx;
			.u-icon{
				background: #FFFFFF;
				border-radius: 100%;
			}
		}
		&_play--icon{
			width: 36rpx;
			height: 36rpx;
			z-index: 999;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-radius: 5px;
		background: #505050;
		}
	}
	
	.publish-handle {
		z-index: 999;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #f1f1f1;
	
		&_content {
			padding: 0 30rpx;
			border-bottom: 1px solid #d7dada;
		}
	
		&_left {
			font-size: 48rpx;
			color: #777777;
	
			&--item {
				padding: 0 40rpx;
			}
	
			.icon {
				font-size: 48rpx;
				// margin-right: 20rpx;
			}
			.popup-item {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				background-color: #fff;
				text-align: center;
				color: #545555;
				font-size: 32rpx;
				border-bottom: 1px solid #e9ecec;
			}
			.divider {
				width: 100%;
				height: 20rpx;
				background-color: rgba(0,0,0,0.6);
			}
		}
	
		&_right {
			color: #999999;
		}
	}
	.video{
		z-index: 9;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.comment-box {
		padding-right: 20rpx;
		padding-left:20rpx;
		background-color: #fff;
	}
	.icon-file{
		text-align: center;
		vertical-align: middle;
	}
</style>